<template>
  <div class="left">
    <h1>Left组件</h1>
    <h1>{{count}}</h1>
    <h1>{{n}}</h1>
    <h2>{{showCount}}</h2>
    <button @click="inc(2)">+2</button>
    <button @click="incA(4)">异步+4</button>
  </div>
</template>
<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
  data(){
    return{
      num:8,
      showNum:'欢迎光临来到蜗牛学苑'
    }
  },
  computed:{
    /* 
    
       ...mapState(['num'])
       可以通过对象的方式重新取得新的名称
       ...mapState({新名称:state中的状态数据的名称})
    */
    // ...mapState({'count':'num'})
    //  ...mapState(['num','name'])
    ...mapState({'count':'num',"n":"name"}),
    //...mapGetters(['showNum'])
    ...mapGetters({'showCount':'showNum'})
  },
  methods:{
    //...mapMutations(['incrementN'])
    ...mapMutations({"inc":"incrementN"}),
    //...mapActions(['incrementAsync'])
    ...mapActions({'incA':'incrementAsync'})
  }
}
</script>

<style>
    .left{
        width: 100%;
        height: 200px;
        background-color:orange;
    }
</style>